<template>
	<view>
		<u-navbar title="人脉扩列" :fixed="true" :placeholder="true" :safeAreaInsetTop="true"  :autoBack="false" leftIconColor="#fff" titleStyle="color:#fff" bgColor="#211E38"
			rightText="更多" @leftClick="leftClick" @rightClick="changeRight"></u-navbar>
		<view class="user mart flex_dq">
			<view class="user_l flex_c">
				<image :src="userinfo.head_img" mode="aspectFill"></image>
			</view>
			<view class="user_c flex_Z">
				<view class="user_c_name flex_dq">
					<text class="f30 c0">{{userinfo.nickname}}</text>
					<text class="f24 c4">{{userinfo.phone_format}}</text>
				</view>
				<text  class="f26 c4">用户身份：{{identityAll.name}}</text>
			</view>
			<view class="user_r flex_dq" @click="upgradeBenefits">
				<text>升级权益</text>
			</view>
		</view>
		<view class="blockchain flex_dq">
			<view class="blockchain_box ">
				<text>区块链地址:</text>
				<text>{{userinfo.eth_address}}</text>
			</view>
			<image src="../../static/icon/copy3.png" mode="aspectFill" @click="isCopy"></image>
		</view>
		
		<view class="invitationCode flex_Z">
			<view class="invitation flex_dq">
				<view class="invitation_l flex_Z">
					<view class="my_code flex_dq">
						<text>我的邀请码：{{userinfo.invite_code}}</text>
						<image src="../../static/icon/copy4.png" mode="" @click="isCopy2"></image>
					</view>
					<text class="f26">累计推荐人数：{{userinfo.direct_num}}</text>
					<text class="f26">累计推荐亭长人数：{{memberAttach.village_constable_number}}</text>
				</view>
				<view class="invitation_r flex_ZC" @click="goInvite">
					<image src="../../static/icon/i_fxzq.png" mode=""></image>
					<text>邀请赚钱</text>
				</view>
			</view>
			<view class="transaction flex_ld">
				<text>首发交易：￥{{memberAttach.frist_market_price}}</text>
				<text>出售交易：￥{{memberAttach.sell_price}}</text>
			</view>
		</view>
		
		<view class="recommendation flex_Z">

			<view class="navtab flex_ld_a">
				<view class="navtab_box flex_c" >
					<text>注册时间</text>
					<view class="xuanze flex_Z">
						<image  :src="upSelect1? select:noselect" @click.stop="click1('up')"></image>
						<image  :src="downSelect1? select2:noselect2" @click.stop="click1('down')"></image>
					</view>
				</view>
				<view class="navtab_box flex_c" >
					<text>首发交易</text>
					<view class="xuanze flex_Z">
						<image  :src="upSelect2? select:noselect" @click.stop="click2('up')"></image>
						<image  :src="downSelect2? select2:noselect2" @click.stop="click2('down')"></image>
					</view>
				</view>
				<view class="navtab_box flex_c" >
					<text>出售交易</text>
					<view class="xuanze flex_Z">
						<image  :src="upSelect3? select:noselect" @click.stop="click3('up')"></image>
						<image  :src="downSelect3? select2:noselect2" @click.stop="click3('down')"></image>
					</view>
				</view>
			</view>
			<view v-for="(item,index) in networkingList" :key="item.id">
				<view class="user  flex_dq">
					<view class="user_l flex_c">
						<image src="../../static/image/logo.png" mode=""></image>
					</view>
					<view class="user_c flex_Z">
						<view class="user_c_name flex_dq">
							<text class="f30 c0">{{item.nickname}}</text>
							<text class="f24 c4 realName " :class="item.is_real?'':'nos'">{{item.is_real?'已实名':'未实名'}}</text>
							<image  class="levels" :src="item.identity.images" mode="aspectFill"></image>
						</view>
						<text  class="f26 c4">{{item.phone_format}}</text>
					</view>
				</view>
				<view class="transaction_s marb flex_ld">
					<text class="f28 c0">首发交易：￥{{item.frist_market_price}}</text>
					<text class="f28 c0">出售交易：￥{{item.sell_price}}</text>
				</view>
			</view>
			<!-- 暂无数据 / 加载更多 -->
			<noDatas :xxxList="networkingList" :status="status"></noDatas>
		</view>
	</view>
</template>

<script>
	import {getuserinfo} from "../../api/index.js";
	import {networkExpansion} from "../../api/store.js";
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				select:'../../static/icon/i_xz.png',
				select2:'../../static/icon/i_xz2.png',
				noselect:'../../static/icon/i_nzx.png',
				noselect2:'../../static/icon/i_nzx2.png',
				upSelect1:true,
				downSelect1:false,
				upSelect2:false,
				downSelect2:false,
				upSelect3:false,
				downSelect3:false,
				order_type:1,
				order_rule:1,
				userinfo:{},
				identityAll:{},
				memberAttach:{},
				networkingList:[],
				downList: [{
						id: 1,
						name: '注册时间',
						type: false
						
					},
					{
						id: 2,
						name: '首发交易',
						type: false
					},
					{
						id: 3,
						name: '出售交易',
						type: false
					},
				],
			}
		}, 
		onLoad() {
			this.initList()
			this.getuser()
		},
		methods: {
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if ( canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url:'/pages/index/index'
					})
				}
			},
			// 用户信息
			getuser() {
				getuserinfo().then(res => {
					console.log(res)
					this.userinfo = res.data
					this.identityAll = res.data.identity
					this.memberAttach = res.data.member_attach
				})
			},
			// 初始化
			initList() {
				console.log(this.order_type);
				console.log(this.order_rule);
				let data = {
					page:this.page,
					size:this.size,
					order_type:this.order_type,
					order_rule:this.order_rule
				};
				networkExpansion(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						let list = res.data.data;
						this.networkingList = this.page == 1 ? list : this.networkingList.concat(list);
						console.log(this.networkingList);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},

			// 更多
			changeRight(){
				uni.navigateTo({
					url:'/pagesMy/networkRights/myEarnings'
				})
			},
			isCopy(){
				uni.setClipboardData({
					data: this.userinfo.eth_address,
					success: function() {
						uni.$u.toast('复制成功');
					}
				});
			},
			// 分享
			isCopy2(){
				uni.setClipboardData({
					data:this.userinfo.invite_code,
					success: function() {
						uni.$u.toast('复制成功');
					}
				});
			},
			// 邀请好友
			goInvite(){
				uni.navigateTo({
					url:'/pagesMy/setting/invitefriend'
				})
			},
			upgradeBenefits(){
				uni.navigateTo({
					url:'/pagesMy/networkRights/upgrade'
				})
			},
			click1(val){
				console.log(val,'1111');
				this.page = 1
				this.networkingList =[]
				this.order_type = 1
				if(val == 'up'){
					this.upSelect1 = true
					this.downSelect1 = false
					
					this.upSelect2 = false
					this.upSelect3 = false
					this.downSelect2 = false
					this.downSelect3 = false
					this.order_rule = 1
				}else{
					this.downSelect1 = true
					this.upSelect1 = false
					
					this.upSelect2 = false
					this.upSelect3 = false
					this.downSelect2 = false
					this.downSelect3 = false
					this.order_rule = 2
				}
				this.initList()
			},
			click2(val){
				this.page = 1
				this.networkingList =[]
				this.order_type = 2
				console.log(val,'2222');
				if(val == 'up'){
					this.upSelect2 = true
					this.downSelect2 = false
					
					this.upSelect1 = false
					this.upSelect3 = false
					this.downSelect1 = false
					this.downSelect3 = false
					this.order_rule = 1
				}else{
					this.downSelect2 = true
					this.upSelect2 = false
					
					this.upSelect1 = false
					this.upSelect3 = false
					this.downSelect1 = false
					this.downSelect3 = false
					this.order_rule = 2
				}
				this.initList()
			},
			click3(val){
				this.page = 1
				this.networkingList =[]
				this.order_type = 3
				console.log(val,'3333');
				if(val == 'up'){
					this.upSelect3 = true
					this.downSelect3 = false
					
					this.upSelect1 = false
					this.upSelect2 = false
					this.downSelect1 = false
					this.downSelect2 = false
					this.order_rule = 1
				}else{
					this.downSelect3 = true
					this.upSelect3 = false
					
					this.upSelect1 = false
					this.upSelect2 = false
					this.downSelect1 = false
					this.downSelect2 = false
					this.order_rule = 2
				}
				this.initList()
			},
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.initList()
			}
		}
	}
</script>
<style>
	page {
		background: #211E38;
	}
</style>
<style scoped>
	.user{
		width: 100%;
		margin-top: 50rpx;
	}
	.mart{
		margin-top: 50rpx;
	}
	.user_l{
		width: 20%;
	}
	.user_l>image{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	.user_c{
		width: 55%;
	}
	.user_c_name{
		margin-bottom: 10rpx;
	}
	.user_r{
		width: 25%;
	}
	.levels {
		width: 100rpx;
		height: 36rpx;
		margin-left: 16rpx;
	}
	.user_r>text{
		width: 156rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		color: #663F0A;
		font-size: 26rpx;
		background: linear-gradient( 270deg, #F2D89A 0%, #E3B863 100%);
		border-radius: 400rpx 400rpx 400rpx 400rpx;
	}
	.realName{
		width: 76rpx;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		border-radius:6rpx;
		color: #ffffff;
		font-size: 20rpx;
		margin-left: 20rpx;
		background: linear-gradient( 274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
	}
	.nos{
		opacity: 0.5;
	}
	.blockchain{
		width: 690rpx;
		margin: 40rpx auto;
		overflow: hidden;
	}
	.blockchain_box{
		display: flex;
		align-items: center;
		width: 640rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #A6A5AF;
	}
	.blockchain_box>text:nth-child(1){
		width: 24%;
	}
	.blockchain_box>text:nth-child(2){
		width: 76%;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical; 
		-webkit-line-clamp:1; 
		overflow:hidden; 
	}
	
	.blockchain>image{
		width: 26rpx;
		height: 26rpx;
		margin-left: 10rpx;
	}
	.invitationCode{
		width: 690rpx;
		height: 256rpx;
		margin: 20rpx auto;
		background: linear-gradient( 90deg, #ECDEC7 0%, #E2BF82 100%);
		border-radius: 20rpx;
		color: #824F17;
	}
	.invitation{
		width: 86%;
		height: 180rpx;
		margin: 0 auto;
		border-bottom: 1rpx solid #6A4A1220;
	}
	.invitation_l{
		width: 70%;
	}
	.my_code{
		font-size: 34rpx;
		margin-bottom: 20rpx;
	}
	.my_code>image{
		width: 28rpx;
		height: 28rpx;
	}
	.invitation_r{
		width: 30%;
		font-size: 24rpx;
	}
	.invitation_r>image{
		width:44rpx;
		height: 44rpx;
		margin-bottom: 10rpx;
	}
	.transaction{
		width: 86%;
		margin: 30rpx auto;
		font-size: 26rpx;
	}
	.transaction_s{
		width: 92%;
		margin: 0rpx auto;
		font-size: 26rpx;
	}
	.recommendation{
		width: 100%;
		min-height: 1000rpx;
		background: #1C1B31;
		/* background: pink; */
		border-radius: 56rpx 56rpx 0 0;
		margin-top: 60rpx;
	}

	.titles{
		color: #ffffff;
		font-size: 32rpx;
	}
	.navtab{
		width: 100%;
		margin: 30rpx 0;
	}
	.navtab_box{
		width: 186rpx;
		height: 52rpx;
		background: #27264A;
		border-radius: 26rpx;
		color: #A6A5AF;
		font-size: 26rpx;
	}
	.xuanze>image{
		width: 22rpx;
		height: 22rpx;
	}
	.xuanze>image:nth-child(1){
		transform: translateY(4rpx);
	}
	.xuanze>image:nth-child(2){
		transform: translateY(-4rpx);
	}
	.marb{
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #ffffff10;
	}


	/deep/ .u-navbar__content__right__text {
		color: #FFFFFF;
	}
</style>